<template>
	<div>
		<div class="container">
			<van-nav-bar title="车辆详情" left-text="返回" left-arrow @click-left="onClickLeft" />
			<!-- 图片轮播图 -->
			<div>
				<van-swipe style="height: 260px;">
					<van-swipe-item v-for="(img,index) in usedcarImgs" :key="index">
						<van-image fit="contain" :src="img" />
					</van-swipe-item>
					<template #indicator="{ active }">
						<div class="custom-indicator">{{ active + 1 }}/{{usedcarImgs.length}}</div>
					</template>
				</van-swipe>
			</div>
			<!-- 车辆信息 -->
			<p class="car-detail-title">{{usedcarInfo.carBrand}} {{usedcarInfo.carSeries}} {{usedcarInfo.carYear}}
				{{usedcarInfo.carDisplacement}} {{usedcarInfo.carVersion}} {{usedcarInfo.transmission}}
			</p>
			<p class="car-detail-price">总价 {{usedcarInfo.price}} 万</p>
			<div>
				<van-tag type="success" size="large" style="margin: 5px 0px 5px 0px">车辆基本信息</van-tag>
				<van-row type="flex" justify="space-around">
					<div class="car-detail-info-div" style="margin-left: 15px;">
						<p class="car-detail-info-div-1">上牌时间</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.licenseTime}}</p>
					</div>
					<div class="car-detail-info-div">
						<p class="car-detail-info-div-1">行驶里程</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.driveMileage}} 万公里</p>
					</div>
					<div class="car-detail-info-div" style="margin-right: 15px;">
						<p class="car-detail-info-div-1">变速箱</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.transmission}}</p>
					</div>

				</van-row>
				<van-row type="flex" justify="space-around">
					<div class="car-detail-info-div" style="margin-left: 15px;">
						<p class="car-detail-info-div-1">排量</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.carDisplacement}}</p>
					</div>
					<div class="car-detail-info-div">
						<p class="car-detail-info-div-1">颜色</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.colour}}</p>
					</div>
					<div class="car-detail-info-div" style="margin-right: 15px;">
						<p class="car-detail-info-div-1">排放标准</p>
						<p class="car-detail-info-div-2">{{usedcarInfo.emissionStandard}}</p>
					</div>
				</van-row>
			</div>
			<div style="margin-top: 5px; border-top: #ffaa7f solid 3px;">
				<van-tabs>
					<van-tab title="车辆其他信息">
						<div>
							<van-tag type="success" size="large" style="margin: 5px 0px 5px 0px">车辆说明</van-tag>
							<van-field readonly v-model="usedcarInfo.remark" rows="3" autosize type="textarea" />
						</div>
						<div>
							<van-tag type="success" size="large" style="margin: 5px 0px 5px 0px">车辆图片</van-tag>
							<div v-for="(img,index) in usedcarImgs" :key="index">
								<van-image fit="contain" :src="img" style="margin: 5px;" radius="15px" />
							</div>
						</div>
					</van-tab>
					<van-tab title="商家店铺信息">
						<van-row type="flex" align="center">
							<van-icon name="shop" size="30px" />
							<p>{{sellerInfo.shopName}}</p>
						</van-row>
						<van-row type="flex" align="center">
							<van-icon name="location" size="30px" />
							<p>地址：{{sellerInfo.shopAddress}}</p>
						</van-row>
					</van-tab>
				</van-tabs>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				//车辆信息
				usedcarInfo: {},
				//车辆图片
				usedcarImgs: [],
				//商家店铺信息
				sellerInfo: {}
			}
		},
		mounted() {
			let usedCarId = this.$route.query.id
			this.loadCarDetailById(usedCarId)
		},
		methods: {
			//加载车辆详情页面
			loadCarDetailById(usedCarId) {
				let _this = this
				_this.$axios({
					method: 'post',
					url: '/usedcar/findDetailByIdForSeller',
					data: {
						usedcarId: usedCarId
					}
				}).then((resp) => {
					if (resp.code == "200") {
						//车辆数据
						_this.usedcarInfo = resp.data.usedcar

						//处理图片
						let arr = [resp.data.usedcar.img]
						if (resp.data.usedcar.imgs.length > 0) {
							_this.usedcarImgs = arr.concat(resp.data.usedcar.imgs.split(','))
						} else {
							_this.usedcarImgs = arr
						}

						//商家信息
						_this.sellerInfo = resp.data.seller
					}
				})
			},
			//返回按钮
			onClickLeft() {
				this.$router.back()
			}
		}
	}
</script>

<style>
	.container {
		margin-bottom: 20px;
	}

	.car-detail-title {
		font-size: 17px;
		font-weight: bold;
		margin: 5px 10px;
	}

	.car-detail-price {
		text-align: right;
		font-weight: bold;
		color: #00aa00;
		font-size: 22px;
		margin: 5px 15px;
	}

	.car-detail-info-div {
		width: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.car-detail-info-div-1 {
		margin: 8px 0px;
	}

	.car-detail-info-div-2 {
		margin: 8px 0px;
		font-weight: bolder;
	}

	/* 轮播图指示器 */
	.custom-indicator {
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 2px 5px;
		font-size: 18px;
		background: rgba(0, 0, 0, 0.1);
	}
</style>
